{extend name="$_admin_base_layout" /}

{block name="page-header"}{/block}

{block name="content"}
<script src="__ADMIN_JS__/core/jquery.min.js?v=2018327"></script>
    {// 后台首页钩子}
    <div class="row" style="margin-top: -30px;">

        <!--类别使用情况-->
        <div class="col-md-2 col-xs-12">
            <div class="block block-bordered block-height-1">
                <div class="block-content border-bottom wh-stat-head">
                    <form action="{:url('mill/stat/ajaxOrderStatus')}" data-charts="stat_xx" class="form-horizontal row">
                        <input type="hidden" name="mill_id" value="1">
                        <input type="hidden" name="series_type" value="text">
                        <input type="hidden" name="series_name" value="">

                        <div class="col-md-12 col-xs-12">
                            <div class="input-group" style="margin-top: 5px;margin-bottom: 15px;">
                                <span class="input-group-addon">类别</span>
                                <select class="js-select2 form-control" id="search_stocktype" name="stocktype" data-width="resolve" data-allow-clear="true" data-placeholder="">
                                    {notempty name="stocktype"}
                                    {php}$type_i=0;{/php}
                                    {volist name="stocktype" id="v"}
                                    <option value="{$key}" {if ($type_i == 0)}selected{/if}>{$v|raw}</option>
                                    {php}$type_i++;{/php}
                                    {/volist}
                                    {/notempty}
                                </select>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" style="display: none">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="block-content" style="padding: 0">

                    <div class="col-md-12 col-xs-12 push1 wh-stat-type-c">
                        <div class="col-md-6" style="vertical-align: middle;height: 34px;text-align: center">
                            <span class="wh-stat-type-c-h1" style="color: #3152ef;">6860kg</span>
                            <br>
                            <span class="wh-stat-type-c-p">月累积出库量</span>
                        </div>
                        <div class="col-md-6" style="vertical-align: middle;height: 34px;text-align: center">
                            <span class="wh-stat-type-c-h1">6860kg</span>
                            <br>
                            <span class="wh-stat-type-c-p">月累积采购量</span>
                        </div>
                    </div>

                    <div class="col-md-12 col-xs-12 push1" style="padding: 0;">
                        <div class="col-md-12 wh-stat-type-c-li">
                            <span class="wh-stat-type-c-li-t">今日新增采购</span>
                            <span class="wh-stat-type-c-li-p">660kg</span>
                        </div>
                        <div class="col-md-12 wh-stat-type-c-li">
                            <span class="wh-stat-type-c-li-t">今日新增入库</span>
                            <span class="wh-stat-type-c-li-p">134kg</span>
                        </div>
                        <div class="col-md-12 wh-stat-type-c-li">
                            <span class="wh-stat-type-c-li-t">今日新增出库</span>
                            <span class="wh-stat-type-c-li-p">68kg</span>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <!--覆盖率-->
        <div class="col-md-2 col-xs-12">
            <div class="block block-bordered block-height-1">
                <div class="block-content border-bottom wh-stat-head">
                    <form action="{:url('wh/stat/ajaxPaintCo1')}" data-charts="stat_client" class="form-horizontal row">
                        <input type="hidden" name="series_type" value="pie">
                        <div class="col-md-12 col-xs-12 push1">
                            <div class="input-group" style="vertical-align: middle;">
                                <span class="input-group-addon wh-stat-head-text" style="text-align: center;">
                                    <a class="wh-date stat-pointer" data-values="year">油漆覆盖率</a>|<a class="wh-date stat-pointer" data-values="month">底漆覆盖率</a>
                                    <input type="hidden" name="date" value="year">
                                </span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" style="display: none">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="block-content" style="height: 242px;padding: 0 0;margin-top: -15px">
                    <div class="charts" id="stat_client"></div>
                </div>
            </div>

        </div>

        <!--油漆的总库存-->
        <div class="col-md-8 col-xs-12">
            <div class="block block-bordered block-height-1 wh-stat-1">
                <div class="block-content wh-stat-head">
                    <div class="form-horizontal row">
                        <div class="col-md-12 col-xs-12 push1">
                            <div class="input-group" style="vertical-align: middle;">
                                <span class="input-group-addon wh-stat-head-text">
                                    <a class="date">油漆的总库存</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stat-bordered">
                    <div class="col-md-2 col-xs-12 push1 wh-stat wh-stat-border wh-stat-border-color-1">
                        <div class="wh-stat-border-jb">
                        </div>
                        <div class="wh-stat-body">
                            <h3 class="wh-stat-title wh-stat-color">原油</h3>
                            <p class="">总的库存（kg）</p>
                            <p class="wh-stat-title kh">---</p>
                            <p class="">总的的损耗：<i>45</i>kg</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-12 push1 wh-stat wh-stat-border wh-stat-border-color-2">
                        <div class="wh-stat-border-jb">
                        </div>
                        <div class="wh-stat-body">
                            <h3 class="wh-stat-title wh-stat-color">稀油</h3>
                            <p class="">总的库存（kg）</p>
                            <p class="wh-stat-title kh">---</p>
                            <p class="">总的的损耗：<i>45</i>kg</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-12 push1 wh-stat wh-stat-border wh-stat-border-color-3">
                        <div class="wh-stat-border-jb">
                        </div>
                        <div class="wh-stat-body">
                            <h3 class="wh-stat-title wh-stat-color">自调油</h3>
                            <p class="">总的库存（kg）</p>
                            <p class="wh-stat-title kh">---</p>
                            <p class="">总的的损耗：<i>45</i>kg</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-12 push1 wh-stat wh-stat-border wh-stat-border-color-4">
                        <div class="wh-stat-border-jb">
                        </div>
                        <div class="wh-stat-body">
                            <h3 class="wh-stat-title wh-stat-color">粉末</h3>
                            <p class="">总的库存（kg）</p>
                            <p class="wh-stat-title kh">---</p>
                            <p class="">总的的损耗：<i>45</i>kg</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-12 push1 wh-stat wh-stat-border wh-stat-border-color-5">
                        <div class="wh-stat-border-jb">
                        </div>
                        <div class="wh-stat-body">
                            <h3 class="wh-stat-title wh-stat-color">底漆</h3>
                            <p class="">总的库存（kg）</p>
                            <p class="wh-stat-title kh">---</p>
                            <p class="">总的的损耗：<i>45</i>kg</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-12 push1 wh-stat wh-stat-border wh-stat-border-color-6">
                        <div class="wh-stat-border-jb">
                        </div>
                        <div class="wh-stat-body">
                            <h3 class="wh-stat-title wh-stat-color">色浆</h3>
                            <p class="">总的库存（kg）</p>
                            <p class="wh-stat-title kh">---</p>
                            <p class="">总的的损耗：<i>45</i>kg</p>
                        </div>
                    </div>

                </div>


            </div>

        </div>

        <!--待办事项-->
        <div class="col-md-4 col-xs-12">
            <div class="block block-bordered block-height-2 wh-stat-1">
                <div class="block-content wh-stat-head2">
                    <div class="form-horizontal row">
                        <div class="col-md-12 col-xs-12 push1">
                            <div class="input-group" style="vertical-align: middle;">
                                <span class="input-group-addon wh-stat-head-text">
                                    <a class="date">代办事项</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stat-bordered wh-stat-head2-content">

                    <div class="col-md-4 col-xs-12 push1 wh-stat-2">
                        <div class="wh-stat-2-content">
                            <div class="wh-stat-2-content"><img class="wh-stat-2-img" src="__STATIC__/wh/img/db0.png"></div>
                            <div style="margin-left: 10px;">
                                <span class="wh-stat-2-h1 status1-area">120</span>
                                <span class="wh-stat-2-p">单</span>
                                <br>
                                <span class="wh-stat-2-p">待采购</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-xs-12 push1 wh-stat-2 wh-stat-2-border">
                        <div  class = "wh-stat-border-left" ></div>
                        <div class="wh-stat-2-content">
                            <div class="wh-stat-2-content"><img class="wh-stat-2-img" src="__STATIC__/wh/img/db1.png"></div>
                            <div style="margin-left: 10px;">
                                <span class="wh-stat-2-h1 status1-area">65</span>
                                <span class="wh-stat-2-p">单</span>
                                <br>
                                <span class="wh-stat-2-p">待审核</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-xs-12 push1 wh-stat-2 wh-stat-2-border">
                        <div  class = "wh-stat-border-left" ></div>
                        <div class="wh-stat-2-content">
                            <div class="wh-stat-2-content"><img class="wh-stat-2-img" src="__STATIC__/wh/img/db2.png"></div>
                            <div style="margin-left: 10px;">
                                <span class="wh-stat-2-h1 status1-area">168</span>
                                <span class="wh-stat-2-p">单</span>
                                <br>
                                <span class="wh-stat-2-p">待入库</span>
                            </div>
                        </div>
                    </div>


                </div>


            </div>

        </div>

        <!--动态提示-->
        <div class="col-md-5 col-xs-12">
            <div class="block block-bordered block-height-2 wh-stat-1">
                <div class="block-content wh-stat-head2">
                    <div class="form-horizontal row">
                        <div class="col-md-12 col-xs-12 push1">
                            <div class="input-group" style="vertical-align: middle;">
                                <span class="input-group-addon wh-stat-head-text">
                                    <a class="date">动态提示</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stat-bordered wh-stat-head2-content">

                    <div class="col-md-12 col-xs-12 push1 " style="padding: 0;">
                        <div class="col-md-12 wh-stat-2-ul">
                            <label class="wh-stat-2-li-label"><i class="fa-2x iconfont wh-laba"></i></label>
                            <label class="wh-stat-2-li-label" style="width: 100px;">4分钟前</label>
                            <div class="wh-stat-2-li">采购单号:XXCQ202302135  工程名称:玫瑰·佳恒一品  颜色:亚光白（YP1115）  厂家色号:SH20220001  自编码:ZBM115989  到货重量:213  </div>
                        </div>
                        <div class="col-md-12 wh-stat-2-ul">
                            <label class="wh-stat-2-li-label"><i class="fa-2x iconfont wh-laba"></i></label>
                            <label class="wh-stat-2-li-label" style="width: 100px;">4分钟前</label>
                            <div class="wh-stat-2-li">采购单号:XXCQ202302135  工程名称:玫瑰·佳恒一品  颜色:亚光白（YP1115）  厂家色号:SH20220001  自编码:ZBM115989  到货重量:213  </div>
                        </div>
                    </div>

                </div>


            </div>

        </div>

        <!--铝卷总的库存-->
        <div class="col-md-3 col-xs-12">
            <div class="block block-bordered block-height-2 wh-stat-1">
                <div class="block-content wh-stat-head2">
                    <div class="form-horizontal row">
                        <div class="col-md-12 col-xs-12 push1">
                            <div class="input-group" style="vertical-align: middle;">
                                <span class="input-group-addon wh-stat-head-text">
                                    <a class="date">铝卷总的库存</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stat-bordered wh-stat-head2-content">

                    <div class="col-md-4 col-xs-12 push1 wh-stat-2">
                        <div class="wh-stat-2-content">
                            <div style="text-align: center">
                                <span class="wh-stat-2-h1 status1-area" style="color: #eb001f">1686</span>
                                <br>
                                <span class="wh-stat-2-p">铝卷总库存(kg)</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-xs-12 push1 wh-stat-2 wh-stat-2-border">
                        <div  class = "wh-stat-border-left" ></div>
                        <div class="wh-stat-2-content">
                            <div style="text-align: center">
                                <span class="wh-stat-2-h1 status1-area" style="color: #5564f5">368</span>
                                <br>
                                <span class="wh-stat-2-p">本月采购(kg)</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-xs-12 push1 wh-stat-2 wh-stat-2-border">
                        <div  class = "wh-stat-border-left" ></div>
                        <div class="wh-stat-2-content">
                            <div style="text-align: center">
                                <span class="wh-stat-2-h1 status1-area" style="color: #24c64f">498</span>
                                <br>
                                <span class="wh-stat-2-p">本月领用(kg)</span>
                            </div>
                        </div>
                    </div>


                </div>


            </div>

        </div>

        <!--趋势图-->
        <div class="col-md-12 col-xs-12">
            <div class="block block-bordered">
                <div class="block-content">
                    <form action="{:url('wh/stat/ajaxOrderJe1')}" data-charts="stat_index" class="form-horizontal row">
                        <input type="hidden" name="series_type" value="line">
                        <input type="hidden" name="series_name" value="订单阶段">
                        <div class="col-md-12 col-xs-12 push1">
                            <div class="input-group" style="vertical-align: middle;">
                                <span class="input-group-addon wh-stat-head-text">
                                    <a class="wh-date stat-pointer" data-values="year">本月采购均势图</a>|<a class="wh-date stat-pointer" data-values="month">上月采购均势图</a>
                                    <input type="hidden" name="date" value="year">
                                </span>
                            </div>
                        </div>
                        <div class="col-md-8 col-xs-12 push1" style="display: none">
                            <div class="input-group">
                                <span class="input-group-addon"></span>
                                <input class="js-daterangepicker form-control" type="text" id="search_time" name="time" value="" placeholder="日期">
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" style="display: none">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="block-content" style="height: 250px">
                    <div class="charts" id="stat_index"></div>
                </div>
            </div>

        </div>

        <!--统计初始化 JS-->
        <script>
            jQuery(function() {

                //初始化时间插件
                App.initHelpers(['daterangepicker']);

                $('#main-container').css('padding-top','30px');
                //初始化统计
                var statInit = function () {
                    var url = "{:url('mill/stat/ajaxIndex')}";
                    var parm = [];
                    $.get(url,parm, function(data){
                        var data = $.parseJSON(data);

                        $('.kh').html(data.kh);
                        $('.dd').html(data.dd);
                        $('.je').html(data.je);
                        $('.xs').html(data.xs);

                    });
                };

                statInit();


            });
        </script>

        <!--echarts统计 JS-->
        <script src="__PLUGINS__/DevTeam/static/js/echarts.min.js"></script>
        <script>
            jQuery(function() {

                //初始化echarts宽度
                var chartsInit = function () {
                    $('.charts').each(function (i,j) {

                        var width = $(this).parent('div').outerWidth();
                        var height = $(this).parent('div').outerHeight();
                        if(!height)height = '242px';
                        $(this).width(width);
                        $(this).height(height);
                    })
                };

                //初始化echarts
                var echartsInit = function (id,data) {
                    var dom = document.getElementById(id);
                    var myChart = echarts.init(dom);

                    var legend_data = data.legend_data;
                    var series_name = data.series_name;
                    var series_type = data.series_type;
                    var series_title = data.value_title;
                    var series = data.value;

                    var option = {
                        title: [],
                        tooltip: {
                            trigger: 'axis',
                        },
                        legend: {
                            //type: 'scroll',
                            orient: 'vertical',
                            left: 'right',
                            top: '40',
                            data: legend_data,

                        },
                        grid: {
                            left: '1%',
                            top: '4%',
                            right: '16%',
                            bottom: '12%',
                            containLabel: true
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                name: series_name,
                                data: series_title,
                                axisTick: {
                                    alignWithLabel: true
                                },

                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine: {
                                    show: true,
                                },
                            }
                        ],
                        series: series
                    };

                    if(data.title)option.title = data.title;

                    if(series_type == 'pie'){
                        delete option.yAxis;
                        delete option.xAxis;
                        delete option.tooltip.trigger;
                        option.label = {
                            alignTo: 'edge',
                            formatter: '{name|{b}}\n{value|{c}}',
                            minMargin: 5,
                            edgeDistance: 10,
                            lineHeight: 15,
                            rich: {
                                value: {
                                    fontSize: 10,
                                    //color: '#999'
                                }
                            }
                        };
                        option.labelLayout = function (params) {
                            const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                            const points = params.labelLinePoints;
                            // Update the end point.
                            points[2][0] = isLeft
                                    ? params.labelRect.x
                                    : params.labelRect.x + params.labelRect.width;
                            return {
                                labelLinePoints: points
                            };
                        };
                    }

                    myChart.setOption(option);
                    myChart.resize();
                };

                //监听年月日事件
                $(".date").click(function(){
                    var date = $(this).attr('data-values');
                    $(this).siblings('input[name=date]').val(date);
                    $(this).siblings('a').removeClass('wh-date-active');
                    $(this).addClass('wh-date-active');

                    //清空时间筛选，并重置echarts
                    var form = $(this).parents('form');
                    form.find('input[name=time]').val("");
                    form.find('.sub').click();
                });

                //监听表单
                $(".sub").click(function(){
                    var form = $(this).parents('form');
                    var url = form.attr('action');
                    var charts_id = form.attr('data-charts');
                    var parm = form.serialize();
                    ajax_sub(charts_id,url,parm,form);
                });

                //请求统计数据，并重置echarts
                function ajax_sub(charts_id,url,parm,form) {
                    $.get(url,parm, function(data){
                        data = $.parseJSON(data);

                        form.find('input[name=time]').val(data.date);

                        //纯文本
                        if(data.series_type == 'text'){
                            $("#"+charts_id+" .status1-area").text(data.status1.area_sum);
                            $("#"+charts_id+" .status1-num").text(data.status1.number_sum);
                            $("#"+charts_id+" .status2-area").text(data.status2.area_sum);
                            $("#"+charts_id+" .status2-num").text(data.status2.number_sum);
                            $("#"+charts_id+" .status3-area").text(data.status3.area_sum);
                            $("#"+charts_id+" .status3-num").text(data.status3.number_sum);
                        }
                        //echart绘图
                        else{
                            echartsInit(charts_id,data);
                        }

                    });
                }

                //加载统计数据
                var subInit = function () {
                    $('.sub').each(function (i,j) {
                        $(this).click();
                    })
                };

                //加载默认时间筛选项
                var dateInit = function () {
                    $('input[name=date]').each(function (i,j) {
                        var val = $(this).val();

                        $(this).siblings('a').removeClass('wh-date-active');
                        $(this).siblings('a[data-values='+val+']').addClass('wh-date-active');
                    })
                };

                jQuery(window).on('resize load', function () {
                    chartsInit();
                    subInit();
                    dateInit();
                });

            });
        </script>

    </div>
{/block}

{block name="script"}

{/block}